<template>
<view class="container">
    <view class="map">
        <map id="map" :longitude="shop.longitude" :latitude="shop.latitude" :markers="markers" style="width: 100%; height: 700rpx;" :enable-scroll="enable_scroll" :enable-zoom="enable_zoom"></map>
    </view>
    <view class="shop-detail">
        <view class="shop-item">
            <label>门店名称:</label>
            <text>{{shop.shop_name}}</text>
        </view>
        <view class="shop-item">
            <label>门店地址:</label>
            <view v-for="(item, index) in shop.area_list" :key="index" class="shop-addr">{{item.name}}</view>
            <view class="shop-addr" v-if="shop.full_address">{{shop.full_address}}</view>
            <text v-else>{{shop.shop_address}}</text>
        </view>
        <view class="shop-item">
            <label>门店电话:</label>
            <view class="tel_block" @tap="contact" :data-tel="shop.shop_phone">
                 {{shop.shop_phone}}
                  <image src="/static/images/icon_booktel.png"></image>
            </view>
           
        </view>
    </view>
</view>
</template>

<script>
// pages/cart/cart2/shopDetail/shopDetail.js
var app = getApp();

export default {
  data() {
    return {
      enable_scroll: false,
      enable_zoom: false,
      markers: [{
        iconPath: "/static/images/hd_red_marker.png",
        id: 0,
        latitude: 22.6352920,
        longitude: 114.0865840,
        width: 30,
        height: 30
      }],
      shop: null
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var data = JSON.parse(options.datas);
    this.setData({
      shop: data,
      'markers[0].latitude': data.latitude,
      'markers[0].longitude': data.longitude
    });
  },
  methods: {
    contact: function (e) {
      var phone = e.currentTarget.dataset.tel;

      if (phone) {
        app.globalData.confirmBox('拨打门店电话：' + phone, function () {
          uni.makePhoneCall({
            phoneNumber: phone
          });
        });
      }
    }
  }
};
</script>
<style>
.shop-detail {
  width: 90%;
  height: 100%;
  background: #fff;
  display: block;
  margin:50rpx auto;
  padding: 30rpx 0 30rpx 30rpx;
  box-shadow: 0 0 10rpx 10rpx #ededed;
}

.shop-item {
  margin:20rpx 0;
}

.shop-item label{
  display: inline-block;
  color: #999;
  font-size: 14pt
}

.shop-item text,.shop-addr{
  display: inline-block;
  color: #333;
  font-size: 12pt;
  margin-left: 10rpx;
}

.tel_block{
  display: inline-block;
  color: #333;
  font-size: 12pt;
  margin-left: 10rpx;
}

.tel_block image{
  width: 45rpx;
  height: 45rpx
}

</style>